<template>
  <div>
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
      <div class="avatar mr20"><img :src="psInfo.user.avatar" /></div>
      <div class="dashboard-workplace-header-tip">
        <p
          class="dashboard-workplace-header-tip-title"
          v-text="psInfo.user.nickname || '-'"
        ></p>
        <div class="dashboard-workplace-header-tip-desc">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >身份: {{ psInfo.user.isPromoter }}</span
          >
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >首次访问: {{ psInfo.user.createTime }}</span
          >
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >近次访问: {{ psInfo.user.lastLoginTime }}</span
          >
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >手机号: {{ psInfo.user.phone }}</span
          >
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >分组：: {{ psInfo.user.groupName }}</span
          >
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >标签：: {{ psInfo.user.tagName }}</span
          >
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >地址：: {{ psInfo.user.addres }}</span
          >
          <span class="dashboard-workplace-header-tip-desc-sp pb-1"
            >备注：: {{ psInfo.user.mark }}</span
          >
          <!-- <span class="dashboard-workplace-header-tip-desc-sp pb-1">余额: {{ psInfo.balance }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">总计订单: {{ psInfo.allOrderCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">总消费金额: {{ psInfo.allConsumeCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">积分: {{ psInfo.integralCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">本月订单: {{ psInfo.mothOrderCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">本月消费金额: {{ psInfo.mothConsumeCount }}</span> -->
        </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="4"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item
            :name="item.val"
            v-for="(item, index) in list"
            :key="index"
            :index="item.val"
          >
            <span slot="title">{{ item.label }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table
          border
          :data="tableData.data"
          class="tabNumWidth"
          v-loading="loading"
          max-height="400"
        >
          <el-table-column
            :prop="item.key"
            :label="item.title"
            width="item.minWidth"
            :show-overflow-tooltip="true"
            v-for="(item, index) in columns"
            :key="index"
          >
            <template slot-scope="scope">
              <span v-if="item.key == 'operatorType'">
                {{
                  scope.row.operatorType == 1
                    ? "其他"
                    : scope.row.operatorType == 2
                    ? "后台"
                    : "手机用户"
                }}
              </span>
              <span v-if="item.key == 'amount'">
                {{
                  parseFloat(`${scope.row.amount}`)
                    .toFixed(2)
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                }}
              </span>
              <span v-else>
                {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[6, 12, 18, 24]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { infobyconditionApi, topdetailApi } from "@/api/user";
import { integralListApi } from "@/api/marketing";
import { walletbillCapitalFlow } from "@/api/financial";
export default {
  name: "UserDetails",
  props: {
    uid: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      columns: [],
      Visible: false,
      list: [
        // { val: '0', label: '消费记录' },
        // { val: '1', label: '积分明细' },
        // { val: '2', label: '签到记录' },
        // { val: '3', label: '持有优惠券' },
        { val: "4", label: "资金监控" },
        { val: "5", label: "好友关系" },
      ],
      tableData: {
        data: [],
        total: 0,
      },
      tableFrom: {
        page: 1,
        limit: 6,
        type: "0",
        userId: "",
        type: "4",
      },
      psInfo: null,
    };
  },
  async mounted() {
    if (this.uid) {
      await this.setTable();
      await this.getHeader();
      // this.getInfo();
      await this.getWalletbillCapitalFlow();
    }
  },
  methods: {
    changeType(key) {
      this.tableFrom.type = key;
      this.setTable();
      if (key === "1") {
        this.integral();
      } else if (key == "4") {
        this.getWalletbillCapitalFlow();
      } else {
        this.getInfo();
      }
    },
    async getWalletbillCapitalFlow() {
      console.log(this.psInfo);
      let res = await walletbillCapitalFlow({
        userId: this.uid,
        limit: this.tableFrom.limit,
        page: this.tableFrom.page,
      });
      this.tableData.data = res.list;
      this.tableData.total = res.total;
      this.tableData.data = res.list;
    },
    integral() {
      this.loading = true;
      integralListApi(
        { limit: this.tableFrom.limit, page: this.tableFrom.page },
        { uid: this.uid }
      )
        .then((res) => {
          this.tableData.data = res.list;
          this.tableData.total = res.total;
          this.columns = [
            {
              title: "来源/用途",
              key: "title",
              minWidth: 120,
            },
            {
              title: "积分变化",
              key: "integral",
              minWidth: 120,
            },
            {
              title: "变化后积分",
              key: "balance",
              minWidth: 120,
            },
            {
              title: "日期",
              key: "updateTime",
              minWidth: 120,
            },
            {
              title: "备注",
              key: "mark",
              minWidth: 120,
            },
          ];
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    getInfo() {
      this.tableFrom.userId = this.uid;
      this.loading = true;
      infobyconditionApi(this.tableFrom)
        .then((res) => {
          this.tableData.data = res.list;
          this.tableData.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    setTable() {
      switch (this.tableFrom.type) {
        case "0":
          this.columns = [
            {
              title: "订单ID",
              key: "orderId",
              minWidth: 250,
            },
            {
              title: "收货人",
              key: "realName",
              minWidth: 90,
            },
            {
              title: "商品数量",
              key: "totalNum",
              minWidth: 80,
            },
            {
              title: "商品总价",
              key: "totalPrice",
              minWidth: 90,
            },
            {
              title: "实付金额",
              key: "payPrice",
              minWidth: 90,
            },
            {
              title: "交易完成时间",
              key: "payTime",
              minWidth: 160,
            },
          ];
          break;
        case "2":
          this.columns = [
            {
              title: "动作",
              key: "title",
              minWidth: 120,
            },
            {
              title: "获得积分",
              key: "number",
              minWidth: 120,
            },
            {
              title: "签到时间",
              key: "createTime",
              minWidth: 120,
            },
            {
              title: "备注",
              key: "title",
              minWidth: 120,
            },
          ];
          break;
        case "3":
          this.columns = [
            {
              title: "优惠券名称",
              key: "name",
              minWidth: 120,
            },
            {
              title: "面值",
              key: "money",
              minWidth: 120,
            },
            {
              title: "有效期",
              key: "endTime",
              minWidth: 120,
            },
            {
              title: "最低消费额",
              key: "minPrice",
              minWidth: 120,
            },
            {
              title: "兑换时间",
              key: "updateTime",
              minWidth: 120,
            },
          ];
          break;
        case "4":
          this.columns = [
            {
              title: "数据场",
              key: "dataFactoryName",
              minWidth: 120,
            },
            {
              title: "交易金额",
              key: "amount",
              minWidth: 120,
            },
            {
              title: "操作员",
              key: "operatorName",
              minWidth: 120,
            },
            {
              title: "前后台类型",
              key: "operatorType",
              minWidth: 120,
            },
            {
              title: "备注",
              key: "remark",
              minWidth: 120,
            },
          ];
          break;
        default:
          this.columns = [
            {
              title: "ID",
              key: "uid",
              minWidth: 120,
            },
            {
              title: "昵称",
              key: "nickname",
              minWidth: 120,
            },
            {
              title: "等级",
              key: "level",
              minWidth: 120,
            },
            {
              title: "加入时间",
              key: "createTime",
              minWidth: 120,
            },
          ];
      }
    },
    pageChange(page) {
      this.tableFrom.page = page;
      if (this.tableFrom.type === "4") {
        // this.integral();
        this.getWalletbillCapitalFlow();
      } else {
        this.getInfo();
      }
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      if (this.tableFrom.type === "4") {
        this.getWalletbillCapitalFlow();
        // this.integral();
      } else {
        this.getInfo();
      }
    },
    getHeader() {
      topdetailApi({ userId: this.uid }).then((res) => {
        this.psInfo = res;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 18px;
  img {
    width: 100%;
    height: 100%;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;
      margin-top: -12px;
      &-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 18px;
        padding: 10px 0 10px;
      }

      &-desc {
        &-sp {
          width: 32%;
          color: #17233d;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.pb-1 {
  padding-bottom: 10px;
}
.mr20 {
  margin: 0 20px;
}
.border_bottom {
  border-bottom: 1px solid #e7eaec;
}
.pb-24 {
  padding-bottom: 24px;
}
</style>
